import { Tooltip, udp } from '@cscec/udp-ui';
import styles from './index.less';
import React from 'react';

function hex2Rgba(bgColor: string, alpha = 1) {
  const color = bgColor.slice(1);
  const rgba = [
    parseInt(`0x${color.slice(0, 2)}`),
    parseInt(`0x${color.slice(2, 4)}`),
    parseInt(`0x${color.slice(4, 6)}`),
    alpha,
  ];
  return `rgba(${rgba})`;
}

function getCardBackground(color = '#4160FF') {
  if (color[0] !== '#' || color === '#ffffff') {
    color = '#4160FF';
  }
  return `linear-gradient(180deg, ${hex2Rgba(color)} 0%, ${hex2Rgba(color, 0.68)} 100%)`;
}
export function Card(props: any) {
  const {
    funcIcon, funcName, funcDesc, menuUrl, menuName, routeName, backgroundColor, env,
  } = props;

  const menuClick = ({ menuUrl, routeName, menuName }: any) => () => {
    if (env?.session !== 'render') {
      return;
    }
    udp.open(menuUrl, { microAppName: routeName || '', AppTitle: menuName });
  };

  const getIconUrl = () => (funcIcon?.indexOf('http') === 0 ? funcIcon : udp.getHttpUrl(`/minio/${funcIcon}`));

  return (
    <div
      className={styles.card}
      style={{ background: getCardBackground(backgroundColor) }}
      onClick={menuClick({ menuUrl, routeName, menuName: menuName || funcName })}
    >
      <div className={styles.left}>
        <img src={getIconUrl()} />
      </div>
      <div className={styles.right}>
        <Tooltip title={funcName} overflow><div className={styles.title}>{funcName}</div></Tooltip>
        <Tooltip title={funcDesc} overflow><div className={styles.desc}>{funcDesc}</div></Tooltip>
      </div>
      <img className={styles.mask} src={udp.getPublicPath('image/common-function-background-mask.png')} />
    </div>
  );
}
